<template>
  <div class="app-container">
    <div class="block" style="width:25%">
      <el-tree :data="treeNode" node-key="id" :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button
              v-permission="'module:update'"
              type="text"
              size="mini"
              @click="() => edit(data)"
            >
              编辑
            </el-button>
            <el-button
              v-permission="'module:add'"
              type="text"
              size="mini"
              @click="() => append(data)"
            >
              添加
            </el-button>
            <el-button
              v-permission="'module:delete'"
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            >
              删除
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>
    <el-dialog
      :title="`${editForm.type === 'edit' ? '编辑' : '添加'}模块`"
      :visible.sync="dialogFormVisible"
      width="30%"
    >
      <el-form
        :model="editForm"
        label-width="100px"
        ref="editForm"
        :rules="editFormRules"
      >
        <el-form-item
          label="当前模块:"
          prop="parentName"
          v-show="editForm.type === 'add'"
        >
          <el-input
            disabled
            v-model="editForm.parentName"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="模块图标:" prop="moduleIcon">
          <el-input
            v-model="editForm.moduleIcon"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="模块名:" prop="moduleName">
          <el-input
            v-model="editForm.moduleName"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="模块路径:" prop="moduleUrl">
          <el-input v-model="editForm.moduleUrl" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="savaModule">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryAllModule, addOrEditModule, deleteModule } from '@/api/system'

export default {
  data() {
    return {
      dialogFormVisible: false,
      loading: false,
      treeNode: [],
      editForm: {
        type: '',
        rowId: undefined,
        moduleIcon: '',
        moduleName: '',
        moduleUrl: '',
        parentId: 0,
        parentName: ''
      },
      editFormRules: {
        moduleName: [
          { required: true, message: '模块名不能为空', trigger: 'change' }
        ]
      },
      data: {}
    }
  },
  created() {
    this.doQuery()
  },
  methods: {
    handleSortChange({ column, prop, order }) {
      this.queryForm.ascs = ''
      this.queryForm.descs = ''
      if (order) {
        if (order === 'ascending') {
          this.queryForm.ascs = column.sortBy
        } else {
          this.queryForm.descs = column.sortBy
        }
      }
      this.queryForm.current = 0
      this.doQuery()
    },
    handleCurrentChange(current) {
      this.queryForm.current = current
      this.doQuery()
    },
    handleSizeChange(size) {
      this.queryForm.size = size
      this.doQuery()
    },
    doQuery() {
      this.loading = true
      queryAllModule().then(({ data: { data } }) => {
        this.treeNode = data.module
        this.loading = false
      })
    },
    edit(data) {
      this.openDetailDialog()
      this.editForm = {
        type: 'edit',
        rowId: data.id,
        moduleIcon: data.icon,
        moduleUrl: data.url,
        moduleName: data.label
      }
      this.data = data
    },
    append(data) {
      this.openDetailDialog()
      this.editForm.parentId = data.id
      this.editForm.type = 'add'
      this.editForm.parentName = data.label
      this.data = data
    },
    savaModule() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          addOrEditModule(this.editForm).then(
            ({ data: { data, msg, code } }) => {
              if (code === 0) {
                if (this.editForm.type === 'edit') {
                  this.data.icon = this.editForm.moduleIcon
                  this.data.label = this.editForm.moduleName
                  this.data.url = this.editForm.moduleUrl
                } else {
                  const child = {
                    id: data.rowId,
                    label: this.editForm.moduleName,
                    icon: this.editForm.moduleIcon,
                    url: this.editForm.moduleUrl,
                    children: []
                  }
                  if (!this.data.children) {
                    this.$set(this.data, 'children', [])
                  }
                  this.data.children.push(child)
                }
                this.dialogFormVisible = false
              }
              this.$message({
                showClose: true,
                message: msg,
                type: code === 0 ? 'success' : 'error'
              })
            }
          )
        }
      })
    },
    remove(node, treeNodedata) {
      this.$confirm('此操作将永久删除该模块, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteModule(treeNodedata.id).then(({ data: { data, msg } }) => {
          const parent = node.parent
          const children = parent.data.children || parent.data
          const index = children.findIndex(d => d.id === treeNodedata.id)
          children.splice(index, 1)
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    openDetailDialog() {
      this.editForm = {}
      this.dialogFormVisible = true
      this.$refs.editForm && this.$refs.editForm.resetFields()
    }
  },
  components: {}
}
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.el-button--mini {
  font-size: 14px;
}
</style>
